﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{/layout/layout}">
<head>

</head>
<body>


<div id="content" layout:fragment="content">
    <!-- breadcrumb start -->
    <div class="breadcrumb-area">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="/"><i class="fa fa-home"></i>主页</a></li>
                <li class="active">所有书籍</li>
            </ol>
        </div>
    </div>
    <!-- breadcrumb end -->
    <!-- shop-area start -->
    <div class="shop-area">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-4">
                    <div class="column mt-55">
                        <h2 class="title-block">筛选</h2>
                        <div class="sidebar-widget">
                            <h3 class="sidebar-title">价格区间</h3>
                            <ul class="sidebar-menu">
                                <div th:unless="${#lists.isEmpty(bookForm)}">
                                    <li>最小价格:<input type="number" id="minMoney" th:value="${bookForm.minBookPrice}"/>
                                    </li>
                                    <li>最大价格:<input type="number" id="maxMoney" th:value="${bookForm.maxBookPrice}"/>
                                    </li>
                                </div>
                                <div th:if="${#lists.isEmpty(bookForm)}">
                                    <li>最小价格:<input type="number" id="minMoney"/></li>
                                    <li>最大价格:<input type="number" id="maxMoney"/></li>
                                </div>
                                <li style="text-align:right">
                                    <button onclick="findByPrice(this)">确定</button>
                                </li>
                            </ul>
                        </div>
                        <div class="sidebar-widget">
                            <h3 class="sidebar-title">排序</h3>
                            <ul class="sidebar-menu">
                                <li class="row"><a class="col-md-8" onclick="orderDesc(this)">价格升序↑</a> <a
                                        onclick="orderDesc(this)">价格降序↓</a></li>
                                <li></li>
                            </ul>
                            <ul class="sidebar-menu">
                                <li class="row"><a class="col-md-8" onclick="salesDesc(this)">销量升序↑</a> <a
                                        onclick="salesDesc(this)">销量降序↓</a></li>
                                <li></li>
                            </ul>
                        </div>

                    </div>
                    <br>
                    <br>
                    <div class="slider-sidebar">
                        <div class="slider-single-img mb-20">
                            <a>
                                <img class="img_a"
                                     src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2653148212,3082258899&fm=26&gp=0.jpg"
                                     alt="" style="width: 262px;height:143px;"/>
                                <img class="img_b"
                                     src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2653148212,3082258899&fm=26&gp=0.jpg"
                                     alt="" style="width: 262px;height:143px;"/>
                            </a>
                        </div>
                        <div class="slider-single-img none-sm">
                            <a>
                                <img class="img_a"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814172228&di=9528664565658ef3afd5e94c897a6ccf&imgtype=0&src=http%3A%2F%2Fpic11.nipic.com%2F20101123%2F2457331_112655897479_2.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                                <img class="img_b"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814172228&di=9528664565658ef3afd5e94c897a6ccf&imgtype=0&src=http%3A%2F%2Fpic11.nipic.com%2F20101123%2F2457331_112655897479_2.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                            </a>
                        </div>
                        <br>
                        <br>
                        <div class="slider-single-img none-sm">
                            <a>
                                <img class="img_a"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559818475503&di=4a2b8703869f0b718cf7633bcc78d425&imgtype=0&src=http%3A%2F%2Fimg4.ph.126.net%2F5zYuZDAih-JOWIWqwK3Ypg%3D%3D%2F645140646637995944.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                                <img class="img_b"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559818475503&di=4a2b8703869f0b718cf7633bcc78d425&imgtype=0&src=http%3A%2F%2Fimg4.ph.126.net%2F5zYuZDAih-JOWIWqwK3Ypg%3D%3D%2F645140646637995944.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                            </a>
                        </div>
                        <br>
                        <br>
                        <div class="slider-single-img none-sm">
                            <a>
                                <img class="img_a"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559818572674&di=4a82a27733d995eb816afb0b88b0fdc8&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20130616%2F20130616174211-1497754337.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                                <img class="img_b"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559818572674&di=4a82a27733d995eb816afb0b88b0fdc8&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20130616%2F20130616174211-1497754337.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 col-sm-8">
                    <h2 class="page-heading mt-40">
                        <span class="cat-name">相关书籍</span>
                        <span class="heading-counter" th:text="找到共+${bookPage.total}+本书"></span>
                    </h2>
                    <div class="shop-page-bar">
                        <div>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-6" th:each=" book : ${books} ">
                                            <div class="single-product mb-30  white-bg">
                                                <div class="product-img pt-20">
                                                    <a th:href="'/store/query?bookId='+${book.bookId}">
                                                        <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                                             th:src="${book.pictureContent[0].pictureContent}"
                                                             style="width: 260.48px;height:260.48px; " alt=""/>
                                                        <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                                             alt="" style="width: 260.48px;height:260.48px;"/>
                                                    </a>
                                                </div>
                                                <div class="product-content product-i">
                                                    <div class="pro-title">
                                                        <h4><a href="#" th:text="${book.bookName}">Moebius
                                                            Table</a></h4>
                                                        <!--                                                    <span class="price product-price" th:each="categorie:${book.categories}">-->
                                                        <!--                                                        <span th:text="${categorie.twoCategories}"></span>-->
                                                        <!--                                                    </span>-->
                                                    </div>
                                                    <div class="pro-rating " th:text="'作者:&emsp;'+${book.author}">
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star-o"></i></a>
                                                    </div>
                                                    <div class="price-box">
                                                        <span class="price product-price" th:text="${book.bookPrice}">$400.00</span>
                                                    </div>
                                                    <div class="product-icon">
                                                        <div class="product-icon-left f-left">
                                                            <div>
                                                                <input type="hidden" th:value="${book.bookId}"/>
                                                                <a href="#" class="addToCart" onclick="addToCart(this)">
                                                                    <i class="fa fa-shopping-cart"></i>加入购物车</a>
                                                            </div>

                                                        </div>
                                                        <div class="product-icon-right floatright">
                                                            <a href="#" data-toggle="tooltip"><i
                                                                    class="fa fa-heart-o" title="加入收藏夹"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--                                            <span class="new">上新</span>-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="content-sortpagibar">
                                        <div class="product-count display-inline">共<span th:text="${bookPage.pages}"
                                                                                         id="allPages"></span>页
                                        </div>
                                        <ul class="shop-pagi display-inline">
                                            <li><a id="leafPage"><i class="fa fa-angle-left"></i></a></li>
                                            <span th:unless="${bookPage.pages>0}">
                                                <li class="currentPage"><a class="pages">0</a></li>
                                            </span>
                                            <span th:if="${bookPage.pages>0}">
                                            <span th:each="i:${#numbers.sequence(1,bookPage.pages)}">
                                            <li class="currentPage"><a th:text="${i}" class="pages">1</a></li>
                                            </span>
                                            </span>
                                            <li><a id="rightPage"><i class="fa fa-angle-right"></i></a></li>
                                        </ul>
                                        <div class="selector-field f-right">

                                        </div>
                                    </div>


                                    <div role="tabpanel" class="tab-pane" id="profile">
                                        <p>好书推荐</p>
                                        <div class="row">
                                            <div class="col-lg-12" th:each="a:${news}">
                                                <div class="single-product  shop-single-product mb-30 white-bg">
                                                    <div class="product-img pt-20">
                                                        <a th:href="'/store/query?bookId='+${a.bookId}">
                                                            <img th:unless="${#lists.isEmpty(a.newsPicture)}"
                                                                 th:src="${a.newsPicture}"
                                                                 alt="" style="width: 260.48px;height:260.48px;"/>
                                                            <img th:if="${#lists.isEmpty(a.newsPicture)}"
                                                                 src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                                                 alt="" style="width: 260.48px;height:260.48px;"/>
                                                        </a>
                                                    </div>
                                                    <div class="product-content">
                                                        <div class="pro-title">
                                                            <h4><a href="product-details.html"
                                                                   th:text="${#dates.format(a.newsDate,'yyyy年MM月dd日 hh:mm:ss')}">Moebius
                                                                Table</a></h4>
                                                        </div>
                                                        <div class="pro-rating mb-20">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star-o"></i></a>
                                                        </div>
                                                        <p th:text="${a.newsContent}"></p>
                                                        <div class="price-box">
                                                        <span class="price product-price"
                                                              th:text="${a.price}">$400.00</span>
                                                        </div>
                                                        <div class="product-icon">
                                                            <div class="product-icon-left f-left">
                                                                <a href="#" onclick="addToCart(this)"><i
                                                                        class="fa fa-shopping-cart"></i>加入购物车</a>
                                                                <input type="hidden" th:value="${a.bookId}">
                                                            </div>
                                                            <div class="product-icon-right floatright">
                                                                <a href="#" data-toggle="tooltip"><i
                                                                        class="fa fa-heart" title="加入收藏夹"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- shop-area end -->
        </div>
    </div>
</div>
<script layout:fragment="script">
    var config = {pageTitle: "所有书籍", navActive: "navProduct"};
    var current = [[${bookPage.current}]];

    $(function () {
        var pages = $("#allPages").text();
        document.title = config.pageTitle;
        $("#" + config.navActive).addClass("active");
        $(".pages").click(function () {
            var page = $(this).text();
            $("[name=page]").val(page);
            $("#allSearch").submit();
        });
        $("#leafPage").click(function () {
            if (current > 0) {
                $("[name=page]").val(current - 1);
                $("#allSearch").submit();
            }
        });
        $("#rightPage").click(function () {
            if (current < pages) {
                $("[name=page]").val(current + 1);
                $("#allSearch").submit();
            }
        })
    });

    function addToCart(e) {
        var bookId = $(e).parent().children("input:first").val();
        $.ajax({
            type: "post",
            url: "/book/addToCart",
            data: {
                bookId: bookId
            },
            dataType: "json",
            success: function (json) {
                if (json.msg === 0) {
                    alert("添加成功");
                } else if (json.msg === 1) {
                    alert("请先登录哦");
                }
            }
        });
    }

    $(function () {
        $(".pages").each(function () {
            if ($(this).text() == current) {
                $(this).parent().addClass("active");
            }
        });

    });

    function findByPrice(e) {
        $("[name=minBookPrice]").val($("#minMoney").val());
        $("[name=maxBookPrice]").val($("#maxMoney").val());
        $("#allSearch").submit();
    }

    function orderDesc(e) {
        $("[name=desc]").val($(e).text());
        $("#allSearch").submit();
    }

    function salesDesc(e) {
        $("[name=sales]").val($(e).text());
        $("#allSearch").submit();
    }
</script>

</body>
</html>

